<template>
  <div class="table-box">
    <ProTable
      ref="proTable"
      title="商品品牌列表"
      :columns="columns"
      :request-api="getProductBrandList"
      :data-callback="dataCallback"
    >
      <!-- 表头按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')"> 新建品牌 </el-button>
      </template>
      <!-- 商品名称组合 -->
      <template #name="scope">
        <div class="flx-align-center">
          <div class="flx-shink0">
            <el-image style="width: 60px; height: 60px" :src="scope.row.logoImageUrl" />
          </div>
          <div class="ml10 w100 sle">
            <div class="">{{ scope.row.name }}</div>
            <div>{{ scope.row.id }}</div>
          </div>
        </div>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="View" @click="openDrawer('查看', scope.row)"> 查看 </el-button>
        <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)"> 编辑 </el-button>
        <el-button type="primary" link :icon="Delete" @click="deleteGoods(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <ProductBrandDrawer ref="drawerRef" />
  </div>
</template>

<script setup lang="tsx" name="productList">
import { ref } from "vue";
import { Product } from "@/api/interface";
import ProTable from "@/components/ProTable/index.vue";
import { useHandleData } from "@/hooks/useHandleData";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import ProductBrandDrawer from "@/views/product/components/ProductBrandDrawer.vue";
import {
  addProductBrand,
  editProductBrand,
  deleteProductBrand,
  getProductBrandList,
  changeBrandShow
} from "@/api/modules/product";
import { CirclePlus, View, EditPen, Delete } from "@element-plus/icons-vue";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
  return {
    list: data,
    total: 10,
    page: 2,
    limit: 10
  };
};

// 表格配置项
const columns: ColumnProps<Product.ResBrandList>[] = [
  { prop: "name", label: "品牌名称", align: "left", search: { el: "input" } },
  {
    prop: "isShow",
    label: "是否显示",
    align: "left",
    fieldNames: { label: "label", value: "status" },
    render: scope => {
      return (
        <el-switch
          model-value={scope.row.isShow}
          active-text={scope.row.isShow ? "开启" : "关闭"}
          active-value={true}
          inactive-value={false}
          onClick={() => changeStatus(scope.row)}
        />
      );
    }
  },
  { prop: "createTime", label: "创建时间", align: "left" },
  { prop: "operation", label: "操作", align: "left", fixed: "right", width: 220 }
];
// 切换品牌显示状态
const changeStatus = async (row: Product.ResBrandList) => {
  await useHandleData(changeBrandShow, { id: row.id, data: row.isShow == true ? false : true }, `切换【${row.name}】显示状态`);
  proTable.value?.getTableList();
};

// 删除用户信息
const deleteGoods = async (params: Product.ResBrandList) => {
  await useHandleData(deleteProductBrand, { id: params.id }, `删除【${params.name}】品牌`);
  proTable.value?.getTableList();
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof ProductBrandDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<Product.ResBrandList> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? addProductBrand : title === "编辑" ? editProductBrand : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
</script>
